<template>
  <view class="loginContainer">
    <!-- 顶部背景 -->
    <view class="loginBackground">
      <image src="../../static/logo.png"></image>
    </view>
    <!-- 登录表单 -->
    <view class="loginContent">

      <!-- 登录表单 -->
      <uni-forms :modelValue="userVo" :rules="rules" validateTrigger="bind" :value="userVo" ref="form">
        <text class="title">LOGIN</text>
        <uni-forms-item name="userId">
          <uni-easyinput type="text" v-model="userVo.userId" placeholder="请输入学/工号" primaryColor="#ff84b4"
            prefixIcon="contact" />
        </uni-forms-item>
        <uni-forms-item name="userPassword">
          <uni-easyinput type="password" v-model="userVo.userPassword" placeholder="请输入密码(初始密码为身份证后六位)"
            primaryColor="#ff84b4" prefixIcon="locked" />
        </uni-forms-item>
        <button @click="submitForm">登录</button>
      </uni-forms>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userVo: {
          userId: '',
          userPassword: '',
        },
        // 表单验证
        rules: {
          userId: {
            rules: [{
                required: true,
                errorMessage: '请填写账号',
              },
              {
                minLength: 3,
                maxLength: 20,
                errorMessage: '账号长度应该在 3 到 20 个字符之间'
              }
            ]
          },
          userPassword: {
            rules: [{
                required: true,
                errorMessage: '请填写密码'
              },
              {
                minLength: 3,
                maxLength: 20,
                errorMessage: '账号长度应该在 3 到 20 个字符之间'
              }
            ]
          }
        }


      }
    },
    onLoad() {
      // 记住登录状态验证
      console.log("==========进入初始认证==========");
      this.$http.get('/api/user/initLogin').then((res) => {
        if(res.data.code == 200){
           console.log("==========已有token认证成功==========");
          uni.switchTab({
            url: '/pages/function/express/Express',
          });
        } 
      });
       console.log("==========进入初始认证==========");
    },
    methods: {
      // 登录提交(验证)
      submitForm(form) {
        this.$refs.form.validate().then(res => {
          uni.showLoading({
            title: '登录中...'
          })
          // 发请求
          this.$http.post('/api/user/login',{
            userId: this.userVo.userId,
            userPassword: this.userVo.userPassword
          }).then((res) => {
            if(res.data.code == 200){
              uni.setStorageSync('token',res.data.data.userToken);
              setTimeout(function() {
                uni.showToast({
                  title: '登录成功',
                  duration: 1500
                });
              }, 1000);
              uni.switchTab({
                url: '/pages/function/express/Express'
              })
            }else if(res.data.code == 403){
               uni.hideLoading();
              uni.showToast({
                title: '用户不存在',
                icon: 'none',
                duration: 2000
              });
            }else {
               uni.hideLoading();
              uni.showToast({
                title: '未知错误',
                icon: 'none',
                duration: 2000
              });
              
            }
           
          })
        }).catch(err => {
          uni.showToast({
            title: '服务器错误请稍后重试！',
            icon: 'none',
            duration: 2000
          });
        })
      }
    },
  }
</script>

<style>
  /* 总容器 */
  .loginContainer {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ff84b4;
    /* background-image: linear-gradient(135deg, #9796f0, #fbc7d4); */
    ;
  }

  /* 背景  */
  .loginContainer .loginBackground {
    height: 25%;
  }

  /* logo处理 */
  .loginContainer .loginBackground image {
    position: absolute;
    border: 5rpx solid #f4f4f4;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    /* border: 1px solid black;s */
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
  }

  /* 内容 */
  .loginContainer .loginContent {
    position: relative;
    height: 75%;
    background-color: #ffffff;
    border-top-left-radius: 80rpx;
    border-top-right-radius: 80rpx;
  }

  /* 表单 */
  .loginContainer .uni-forms {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550rpx;
    height: 600rpx;
  }

  /* 输入框设置 */
  .loginContainer .uni-forms .uni-easyinput input {
    height: 100rpx;
  }

  /* 输入框圆角 */
  .loginContainer .uni-forms .is-input-border {
    border-radius: 50rpx;
  }

  /* 按钮配置 */
  .loginContainer .uni-forms button {
    width: 300rpx;
    height: 80rpx;
    line-height: 55rpx;
    border-radius: 50rpx;
    background-color: #ff84b4;
    color: #ffffff;
    font-size: 32rpx;

    text-decoration: none;
    border: none;
    padding: 12rpx 40rpx;
    outline: none;
    transition: 0.2s all;
  }

  /* 按钮按下 */
  .loginContainer .uni-forms button:active {
    background-color: #ff8cc0;
    transform: scale(0.98);
    box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
  }

  .loginContainer .title {
    display: block;
    margin-bottom: 80rpx;
    font-size: 50rpx;
    font-weight: 1000;
    line-height: 50rpx;
  }

  /* placeholder样式 */
  .placeholderClass {
    color: #c3c3c3;
    font-size: 20rpx;
  }
</style>
